<template>
  <div>发送请求</div>
  <button @click="getTodo">发送请求</button>
  <h3>待办列表</h3>
  <div v-for="(item, index) in todos" :key="index">
    <b>userId: {{ item.userId }}</b> 
    <b>title: {{ item.title }}</b> 
    <b>completed: {{ item.completed }}</b>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import http from '../api/request'

type Todo = {
  id: number
  userId: number
  title: string
  completed: boolean
}

export default defineComponent({
  name: '',
  setup () {
    const todos = ref([] as Todo[])
    const getTodo = () => {
      // 这里需要指定类型
      // 指定返回的数据类型是 Todo
      http.get<Todo>('/todos/1')
      .then(res => {
        todos.value.push(res.data)
      })
    }
    return {
      todos,
      getTodo
    }
  }
})
</script>

<style lang="scss" scoped>

</style>